<!--
//
// GDictPreivew.vue
// rzhwweb
//
// Created by 区区电脑 on 2024/01/20.
//
-->
<template>
    <div v-if="model.color" class="GDictPreivew" :style="{background: model.color, color: '#fff'}">
        {{model.name}}
    </div>
    <div v-else class="GDictPreivew">
        {{model.name}}
    </div>
</template>

<script setup>
import {ref, reactive, computed, onMounted} from "vue";
import {useStore} from "vuex";
import {useRouter} from "vue-router";

const props = defineProps({
    value: {
        type: [String, Number, Boolean]
    },
    code: {
        type: String
    },
});
const emits = defineEmits();

// 路由
const router = useRouter();
// store
const store = useStore();

const state = reactive({
    list: []
})

// 当前字典值
const model = computed(() => {
    return (state.list || []).find(item => item.code == props.value) || {}
})

// 统一字典查询入口
function getDictDataList(code) {
    state.list = $getDictDataListWithTypeCode(code)
}

onMounted(() => {
    getDictDataList(props.code)
})
</script>

<style lang="scss" scoped>
.GDictPreivew {
    display: inline-flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    padding: 0 8px;
    border-radius: 4px;
}
</style>
